<script setup lang="ts">
import { ref ,reactive} from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const formInline = reactive({
    date: '',
    keyword: '',
})
const isFocused = ref(false)
const focusInput = () => {
    isFocused.value = true
    console.log('222222')
}
const blurInput = () => {
    isFocused.value = false
}

const orders = ref([
    {
        date: '2024-11-27',
        id: '2411281753417353',
        items: [
            {
                type: '域名注册',
                groups: [
                    {
                        domain: 'yahoo.com',
                        price: '¥ 400',
                        quantity: 4
                    }
                ]
            },
        ],
        finalPrice: '¥ 90',
        discount: '¥10',
        couponStatus: '未使用优惠券',
        status: '待付款'
    },
    {
        date: '2024-11-27',
        id: '2411281753417354',
        items: [
            {
                type: '域名注册',
                groups: [
                    {
                        domain: 'yahoo.com',
                        price: '¥ 400',
                        quantity: 4
                    }
                ]
            },
        ],
        finalPrice: '¥ 180',
        discount: '¥20',
        couponStatus: '未使用优惠券',
        status: '处理中'
    },
    {
        date: '2024-11-27',
        id: '2411281753417355',
        items: [
            {
                type: '域名注册',
                groups: [
                    {
                        domain: 'yahoo.com',
                        price: '¥ 400',
                        quantity: 4
                    }
                ]
            },
        ],
        finalPrice: '¥ 270',
        discount: '¥30',
        couponStatus: '未使用优惠券',
        status: '已完成'
    },
    {
        date: '2024-11-27',
        id: '2411281753417356',
        items: [
            {
                type: '域名注册',
                groups: [
                {
                        domain: 'yahoo.com',
                        price: '¥ 400',
                        quantity: 4
                    },{
                        domain: 'yahoo.com',
                        price: '¥ 400',
                        quantity: 4
                    },{
                        domain: 'yahoo.com',
                        price: '¥ 400',
                        quantity: 4
                    }
                ]
            },
            {
                type: '域名续费',
                groups: [
                {
                        domain: 'yahoo.com',
                        price: '¥ 200',
                        quantity: 2
                    },{
                        domain: 'yahoo.com',
                        price: '¥ 200',
                        quantity: 2
                    },{
                        domain: 'yahoo.com',
                        price: '¥ 200',
                        quantity: 2
                    },{
                        domain: 'yahoo.com',
                        price: '¥ 200',
                        quantity: 2
                    }
                ]
            }
        ],
        finalPrice: '¥ 360',
        discount: '¥40',
        couponStatus: '未使用优惠券',
        status: '订单状态'
    }
]);
const openDetails = (status) => {
    router.push({
        path: '/order-details',
        query: { status }
    });
}


</script>
<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="bs-panel_hd">
                <div class="bs-panel_tt bold">订单列表</div>
            </div>
            <div class="filter-cell">
                <div class="filter-button">
                    <el-button>上一页</el-button>
                    <el-button>下一页</el-button>
                </div>
                <el-form :inline="true" :model="formInline" class="form-inline">
                    <el-form-item >
                        <el-date-picker
                        v-model="formInline.date"
                        type="daterange"
                        style="width: 300px;"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        />
                    </el-form-item>
                    <el-form-item >
                        <div class="keyword-box">
                            <el-input v-model="formInline.keyword" type="textarea" placeholder="查找域名/后缀 如：.cn 多个域名/后缀用换行分隔" style="width: 200px;" v-if="isFocused" @blur="blurInput" resize	="none" rows="4">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><Search /></el-icon>
                                </template>
                            </el-input>
                            <el-input v-model="formInline.keyword" type="text" placeholder="查找域名/后缀 如：.cn" style="width: 200px;" @focus="focusInput" v-else >
                                <template #suffix>
                                    <el-icon class="el-input__icon"><Search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item >
                        <el-icon size="20" color="#666"><Refresh /></el-icon>
                    </el-form-item>
                </el-form>
            </div>
            <div class="order-main">
                <div class="order-thead">
                    <div class="order-tr">
                        <div class="order-th w-1">订单信息</div>
                        <div class="order-th w-2">单价</div>
                        <div class="order-th w-3">数量</div>
                        <div class="order-th w-4">金额</div>
                        <div class="order-th w-5">订单状态</div>
                        <div class="order-th w-6">操作</div>
                    </div>
                </div>
                <div v-for="(order, index) in orders" :key="index" class="order-panel">
                    <div class="order-tr-hd">
                        <strong class="order-time">{{ order.date }}</strong>
                        <span class="id">订单号：{{ order.id }}</span>
                        <div class="ac-link"><el-icon size="20px"><Delete /></el-icon></div>
                    </div>
                    <div class="order-tr">
                        <div class="order-td order-td-group">
                            <div class="type-row" v-for="(item, itemIndex) in order.items" :key="itemIndex">
                                <div class="item w-1-1">{{ item.type }}</div>
                                <div class="flex-col">
                                    <div class="item-group" v-for="(group, groupIndex) in item.groups.slice(0, 2)" :key="groupIndex" >
                                        <div class="item w-1-1">{{ group.domain }}</div>
                                        <div class="item w-2">{{ group.price }}</div>
                                        <div class="item w-3">{{ group.quantity }}</div>
                                    </div>
                                    <div class="item-group" >
                                        <div class="item w-1-1">
                                            …等{{ item.groups.length }}个域名
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-td w-4">
                            <div class="price-value">{{ order.finalPrice }}</div>
                            <div class="item">优惠金额：{{ order.discount }}</div>
                            <div class="item">{{ order.couponStatus }}</div>
                        </div>
                        <div class="order-td w-5">
                            <div class="status-text">{{ order.status }}</div>
                            <el-link @click="openDetails(order.status)">查看详情</el-link>
                        </div>
                        <div class="order-td w-6">
                            <template v-if="order.status === '待付款'">
                                <el-button class="btn-action" type="primary">立即付款</el-button>
                            </template>
                            <template v-else-if="order.status === '处理中'">
                                <!-- No button displayed -->
                            </template>
                            <template v-else-if="order.status === '已完成'">
                                <el-link>申请开票</el-link>
                            </template>
                            <template v-else-if="order.status === '订单状态'">
                                <el-button class="btn-action" type="primary">立即付款</el-button>
                                <br>
                                <el-link>申请开票</el-link>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bs-panel-footer">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000" />
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
.price-value{
    color: #ef813e;
    font-size: 16px;
}
.w-1{
    width: 322px;
    text-align: center;
}
.w-2,.w-3{
    width: 142px;
    text-align: center;
}
.w-4,.w-5,.w-6{
    width:200px;
    text-align: center;
}
.w-1-1{
    width: 156px;
    text-align: center;
}



.order-panel{
    color: #7F7F7F;
    margin-bottom: 10px;
    .item-group{
        display: flex;
        align-items: center;
    }
    .btn-action{
        width: 100px;
    }
    .order-tr-hd{
        display: flex;
        align-items: center;
        height: 32px;
        border-color: rgba(241, 241, 241, 1);
        background-color: rgba(241, 241, 241, 1);
        color: #222;
        .order-time{
            padding: 0 40px;
        }
    }
    .order-tr{
        display: flex;
        border: 1px solid rgba(241, 241, 241, 1);
    }
    .order-td{
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        height: auto;
        padding:15px 10px;
        line-height: 1.6;
        border-right: 1px solid rgba(241, 241, 241, 1);
    }

    .order-td-group{
        flex: 1;
        padding: 20px 0;
        min-width: 0;
    }
}
.type-row{
    display: flex;
    padding: 7px 0;
}



.order-thead{
    .order-tr{
        display: flex;
        align-items: center;
        height: 32px;
        background-color: rgba(230, 143, 54, 0.14901960784313725);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(241, 241, 241, 1);
        margin-bottom: 10px;
    }
}
.filter-cell{
    margin-bottom: 15px;
}
.filter-box{
    display: flex;
    align-items: center
}
.filter-box .el-select{
    margin: 0 10px;
}
.filter-cell ::v-deep .el-form-item{
    margin-right: 12px;
}

.keyword-box{
    height: 32px;
}
.filter-cell{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ac-link{
    line-height: 1;
    padding: 10px 15px;
    margin-left: auto;
}
.status-text{
    color: #222;
    font-weight: 600;
}


</style>
